import { Form } from 'antd';
import CustomRadioGroup from '../../../../components/customRadio';

const SocketDesign = () => {

  const sizeOptions = [
      { label: '3mm', value: 3 },
      { label: '5mm', value: 5 },
      { label: '7mm', value: 7 },
  ];

  return (
    <Form layout="vertical">
      <Form.Item label="更换组件" name="productName2">
        <CustomRadioGroup
            options={sizeOptions}
            renderOption={(option, isChecked) => {
                return (
                    <div style={{ 
                        border: isChecked ? '1px solid #1677ff' : '1px solid #d9d9d9',
                        backgroundColor: isChecked ? 'rgba(22, 119, 255, 0.06)' : 'transparent'
                    }}>
                        {option.label}
                    </div>
                );
            }}
        />
      </Form.Item>
    </Form>
  );
};

export default SocketDesign;